<template>
  <div class="map">
    <div id="hn" ref="map"></div>
  </div>
</template>

<script>
import henanJson from "../../public/json/henan.json";
export default {
  name: "EchartsMap",
  data() {
    return {
      Data: [],
    };
  },
  mounted() {
    this.getdata();
  },
  components: {},
  methods: {
    getdata() {
      this.$axios.get("./json/Data.json").then((tableData) => {
        this.Data = tableData.data.Data;
        /* console.log(this.Data);*/
        this.initMap(this.Data);
      });
    },
    initMap: function (data) {
      // console.log(1111);
      var mapEcharts = this.$echarts.init(this.$refs.map);
      var option = {
        tooltip: {
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
        },
        visualMap: [
          {
            type: "continuous",
            itemWidth: 15,
            itemHeight: 100,
            right: 0,
            y: "bottom",
            inverse: true,
            align: "left",
            calculable: true, //是否显示拖拽用的手柄
            inRange: {
              color: ["#C9E7FF", "#1e90ff"],
            },
          },
        ],
        series: [
          {
            name: "疫情阳性分布",
            type: "map",
            mapType: "henan",
            left: 40,
            top: 30,
            itemStyle: {
              label: {
                show: true,
              },
              normal: {
                label: {
                  show: true,
                },
                borderColor: "gray", //地市边界颜色
                borderWidth: 1,
              },
            },

            emphasis: {
              //鼠标划过去之后的颜色
              disabled: false,
              itemStyle: {
                areaColor: "#FF902D",
              },
            },
            select: {
              //地图点击选中后显示的颜色
              label: {
                show: true,
              },
              itemStyle: {
                areaColor: "#FF902D",
                opacity: 1,
              },
            },
            data: data,
          },
        ],
      };
      this.$echarts.registerMap("henan", henanJson);
      mapEcharts.setOption(option, true);
      window.addEventListener("resize", () => {
        mapEcharts.resize();
      });

      var that = this;
      mapEcharts.on("click", function (params) {
        // console.log(params.data);
        that.$store.commit("changedata", params.data);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.map {
  #hn {
    width: 295px;
    height: 300px;
    margin: auto;
  }
}
</style>